<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

    // 数组解构 => 对应下标解构
    // 对象解构 => 对应键名解构

    var zhang = { name: "张三", age: 18, height: "177cm", weight: "70kg" }

    // 直接对应键名解构(简写)
    // var {name,age,height,weight} = { name: "张三", age: 18, height: "177cm", weight: "70kg" };
    // console.log(name,age,height,weight);

    // 自定义变量名 (虽然写起来比较麻烦,但是变量名可以改)
    // var {name:name,age:age,height:height,weight:weight} = { name: "张三", age: 18, height: "177cm", weight: "70kg" };
    // console.log(name,age,height,weight);

    // var {name:a,age:b,height:c,weight:d} = { name: "张三", age: 18, height: "177cm", weight: "70kg" };
    // console.log(a,b,c,d);

    // 自定义变量名常见应用
    // 1. 如果对象的键名是关键词 => 需要自定义变量名
    // 2. 如果变量已经被使用,直接解构可以会覆盖 =>   需要自定义变量名

    var {name,age,height,weight,class:_class} = { name: "张三", class:"2302", age: 18, height: "177cm", weight: "70kg" }
    console.log(name,age,height,weight,_class);








</script>

</html>